<!--
 * @Author: Rain
 * @Date: 2021-11-28 22:09:16
 * @LastEditTime: 2021-12-09 09:32:28
 * @Description: Do Something
-->
<template>
  <div class="w-full h-full" style="padding: 20px;">
    <el-form
      ref="form"
      :model="form"
      :rules="rules"
      size="small"
      label-width="80px"
    >
      <el-form-item label="测试单元" prop="title">
        <el-select
          v-model="form.title"
          filterable
          style="width: 370px;"
          placeholder="请选择"
        >
          <el-option
            v-for="item in list"
            :key="item.id"
            :label="item.atmrName"
            :value="item.id+''"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="模板标识" prop="ftlKey">
        <el-input
          v-model="form.ftlKey"
          style="width: 370px;"
          placeholder="请输入模板标识..."
        />
      </el-form-item>
      <el-form-item label="模板内容" prop="content">
        <Editor ref="editor" :value="form.content" height="500" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer flex flex-center">
      <el-button type="danger" @click="doAction(1)">取消</el-button>
      <el-button type="primary" @click="doAction(2)">确认</el-button>
    </div>
  </div>
</template>

<script>
import Editor from '@/components/YamlEdit/index'
import { mapGetters } from 'vuex'
export default {
  components: {
    Editor
  },
  data() {
    return {
      form: { id: null, title: null, content: '', fltKey: null },
      rules: {
        title: [{ required: true, message: '标题不能为空', trigger: 'blur' }],
        content: [
          { required: true, message: '模板内容不能为空', trigger: 'blur' }
        ],
        ftlKey: [
          { required: true, message: '模板类别不能为空', trigger: 'blur' }
        ]
      },
      list: []
    }
  },
  computed: {
    ...mapGetters('reportTmpl', ['template']),
    visitedViews() {
      return this.$store.state.tagsView.visitedViews
    }
  },
  mounted() {
    if (this.template && this.template.id) {
      this.form = this.template
    }
    this.$http.get('/api/atmr?page=0&size=100000&sort=id').then(_ => {
      const { content } = _
      this.list = content
    })
  },
  methods: {
    isActive(route) {
      return route.path === this.$route.path
    },
    toLastView(visitedViews, view) {
      const latestView = visitedViews.slice(-1)[0]
      if (latestView) {
        this.$router.push(latestView)
      } else {
        // now the default is to redirect to the home page if there is no tags-view,
        // you can adjust it according to your needs.
        if (view.name === 'Dashboard') {
          // to reload home page
          this.$router.replace({ path: '/redirect' + view.fullPath })
        } else {
          this.$router.push('/')
        }
      }
    },
    closeSelectedTag(view) {
      this.$store
        .dispatch('tagsView/delView', view)
        .then(({ visitedViews }) => {
          if (this.isActive(view)) {
            this.toLastView(visitedViews, view)
          }
        })
    },
    doAction(index) {
      if (index === 1) {
        this.closeSelectedTag({ path: '/atmr/examReportFtlAdd' })
      } else {
        this.form.content = this.$refs.editor.getValue()
        this.$refs['form'].validate(valid => {
          if (valid) {
            this.$http({
              url: '/api/examReportFtl',
              data: this.form,
              method: this.template ? 'PUT' : 'POST'
            }).then(() => {
              this.closeSelectedTag({ path: '/atmr/examReportFtlAdd' })
            })
          } else {
            return false
          }
        })
      }
    }
  }
}
</script>

<style></style>
